/*
 * 机器试妆参数列表
 * @Author: zfx
 * @Date: 2018-07-3 10:00:05
 */
<style lang="less" rel="stylesheet/less" type="text/less">
	.v-admin-machine-parameters-index{
	.ivu-table-column-center{
		padding: 5px 0;
	}
	.ivu-table-cell{
		padding-left: 10px;
		padding-right: 10px;
	}
	.ivu-table-body {
		overflow-x: auto;
	}
	.info{
		text-align: left;
		white-space: nowrap;
		padding: 5px 0;
	}
	.info-thumb{
		width: 60px;
		height: 60px;
		display: table-cell;
		cursor: pointer;
		img{
			width: 100%;
		}
	}
	.info-title{
		height: 60px;
		display:  table-cell;
		white-space: normal;
		vertical-align: middle;
		padding-left: 8px;
	}
	.prices-item {
		white-space: nowrap;
		text-align: center;
	}
	.deleted, .hot, .new, .sale {
		cursor: pointer;
	}
}
</style>
<template>
	<div class="v-admin-machine-parameters-index">

		<Table
			:columns="columns"
			:loading="loading"
			:data="machines"
			:height="tableHeight()"
			class="personal-scrollbar"
			border />

	</div>
</template>

<script>

import lineProgress from 'src/views/component/progress';

import Button from 'iview/src/components/button';

import { computedTableHeight } from 'src/views/mixins/computedTableHeight';

export default {

	name: 'MachineParametersIndex',
	mixins: [computedTableHeight],
	props: {
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
		machines: {
			type: Array,
			default() {
				return [];
			},
		},
		machinesInfo: {
			type: Array,
			default() {
				return [];
			},
		},
	},

	data() {
		return {

			columns: [

				{
					title: this.$t('machine.model'),
					key: 'coed',
					align: 'center',
					width: 160,
					render: (h, { row }) => <div> { row.code || '-' } </div>,
				},

				{
					title: this.$t('common.operation'),
					width: 140,
					align: 'center',
					fixed: 'right',
					render: (h, { row }) => (
						<div>
							<Button size="small" style={{ marginRight: '5px' }} on-click={() => { this.$emit('edit', row); }} type="primary">
								{ this.$t('common.edit') }
							</Button>
							{
								Number(row.id) !== 1
									? <Button size="small" style={{ marginRight: '5px' }} on-click={() => { this.$emit('delete', row.id); }} type="error">
										{ this.$t('common.delete') }</Button>
									: ''
							}
						</div>
					),
				},

			],
		};
	},
	watch: {
		machinesInfo() {
			this.machinesInfo.forEach((col) => {
				this.columns.splice(-1, 0, {
					title: col.name,
					key: col.field_name,
					align: 'center',
					width: 170,
					render: (h, { row }) => (
						h(lineProgress, {
							style: {
								marginBottom: '5px',
							},
							props: {
								bgColors: ['rgb(0,153,255)', 'rgba(0,153,255,0.3)'],
								value: Number(row[col.field_name]),
								minValue: Number(col.min_value),
								maxValue: Number(col.max_value),
								label_name: this.$t('machine.number'),
								unitId: `machine_${col.field_name}_${row.id}`,
								unit: '',
								width: '42%',
							},
						})
					),
				});
			});
		},
	},
	methods: {


	},
};
</script>
